<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4</title>
    <style>
    div{
        float: left;
        border: solid 1px black;
        background-color: pink;
    }
    #header,#footer{
        width: 50%;
        height: 3rem;
    }
    #mid{
        width: 50%;
        height: 35.6rem;
    }
    #mu{
        width: 100%;
    }
    .mu3{
        height: 6rem;
        width: 33%;
    }
    #md{
        width: 100%;
    }
    #mdl{
        width: 33%;
        height: 29.3rem;
    }
    /*#mdr{*/
    /*    width: 66%;*/
    /*}*/
   .mdll{
       width: 33%;
   }
 .mdlll{
     width: 100%;
     height: 20rem;
 }
 .mdllr{
     width: 100%;
     height: 9rem;
 }


/*div{*/
/*    border: 1px solid black;*/
/*}*/
/*        #container{*/
/*            width: 100%;*/
/*        }*/
    </style>
</head>
<body>
<div id="header">header</div>
<div id="mid">
    <div id="mu">
        <div class="mu3">mul.</div>
        <div class="mu3">mum..</div>
        <div class="mu3">mur...</div>
    </div>
    <div id="md" class="borderAll">
        <div id="mdl">mdl...</div>
            <div class="mdll">
                <div class="mdlll">mdrul</div>
                <div class="mdllr">mdrur</div>
            </div>
            <div class="mdll">
                <div class="mdlll">mdrdl</div>
                <div class="mdllr">mdrdr</div>
            </div>
    </div>
</div>
<div id="footer">footer</div>
</body>
</html>